<template>
  <div class="calendar-wrapper">
    <div class="options-panel">
      <i class="iconfont icon-double-arrow-left" @click.stop="prevYearClick"></i>
      <i class="iconfont icon-arrow-left" @click.stop="prevMonthClick"></i>
      <span>{{ year }}年{{ month }}月</span>
      <i class="iconfont icon-arrow-right" @click.stop="nextMonthClick"></i>
      <i class="iconfont icon-double-arrow-right" @click.stop="nextYearClick"></i>
    </div>
    <div class="content-panel">
      <div class="week-panel">
        <span v-for="item in weekList" :key="item.value">{{ item.label }}</span>
      </div>
      <div class="day-panel">
        <span
          v-for="item in 42"
          :key="item"
          :class="{
            active: item - beginDay === day
          }"
          @click="handleClickDay(item - beginDay)"
        >
          <em v-if="item - beginDay > 0 && item - beginDay <= curDay">
            {{ item - beginDay }}
          </em>
          <em v-else-if="item - beginDay <= 0" class="other-day">
            {{ item - beginDay + prevDay }}
          </em>
          <em v-else class="other-day">
            {{ item - beginDay - curDay }}
          </em>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      weekList: [
        {
          value: 'Sun',
          label: 'Sun'
        },
        {
          value: 'Mon',
          label: 'Mon'
        },
        {
          value: 'Tue',
          label: 'Tue'
        },
        {
          value: 'Wed',
          label: 'Wed'
        },
        {
          value: 'Thu',
          label: 'Thu'
        },
        {
          value: 'Fri',
          label: 'Fri'
        },
        {
          value: 'Sat',
          label: 'Sat'
        }
      ],
      curDate: null,
      year: null,
      month: null,
      day: null
    }
  },
  methods: {
    // 获取当前年月日
    getCurDate() {
      this.year = new Date().getFullYear()
      this.month = new Date().getMonth() + 1
      this.day = new Date().getDate()
      this.curDate = `${this.year}-${this.month}-${this.day}`
    },
    // 点击日期
    handleClickDay(day) {
      if (day <= 0) {
        this.prevMonthClick()
        this.day = day + this.curDay
      } else if (day > this.curDay) {
        this.nextMonthClick()
        this.day = day - this.prevDay
      } else {
        this.day = day
      }
      this.$emit('dateChange', `${this.year}-${this.month}-${this.day}`)
    },
    // 上月
    prevMonthClick() {
      if (this.month === 1) {
        this.month = 12
        this.year--
      } else {
        this.month--
      }
    },
    // 下月
    nextMonthClick() {
      if (this.month === 12) {
        this.month = 1
        this.year++
      } else {
        this.month++
      }
    },
    // 去年
    prevYearClick() {
      this.year--
    },
    // 明年
    nextYearClick() {
      this.year++
    }
  },
  computed: {
    // 当月一号是周几
    beginDay() {
      return new Date(this.year, this.month - 1, 1).getDay()
    },
    // 当月天数
    curDay() {
      return new Date(this.year, this.month, 0).getDate()
    },
    // 上月天数
    prevDay() {
      return new Date(this.year, this.month - 1, 0).getDate()
    }
  },
  created() {
    this.getCurDate()
  }
}
</script>
